<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Shapes Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.auto.min.js"
    ></script>

    <script type="text/javascript" src="redist/jquery.3.7.1.min.js"></script>
    <script
      type="text/javascript"
      src="../dist/jquery.imagemapster.js"
    ></script>

    <!-- <script type="text/javascript" src="redist/zepto.1.2.0.min.js"></script>
    <script
      type="text/javascript"
      src="../dist/jquery.imagemapster.zepto.js"
    ></script> -->

    <link rel="stylesheet" href="stylesheets/base.css" />

    <script type="text/javascript">
      $(document).ready(function () {
        'use strict';

        // eslint-disable-next-line no-unused-vars
        function state_change(data) {
          //alert(data.state+":"+data.selected);
        }
        $('img').mapster({
          noHrefIsMask: false,
          onStateChange: state_change,
          fillColor: '0a7a0a',
          fillOpacity: 0.7,
          mapKey: 'group',
          strokeWidth: 2,
          stroke: true,
          strokeColor: 'F88017',
          render_select: {
            fillColor: 'adadad',
            fillOpacity: 0.5
          },
          areas: [
            {
              key: 'blue-circle',
              includeKeys: 'rectangle',
              stroke: false
            },
            {
              key: 'rectangle',
              stroke: true,
              strokeWidth: 3
            },
            {
              key: 'outer-circle',
              includeKeys: 'inner-circle-mask,outer-circle-mask',
              stroke: true
            },
            {
              key: 'outer-circle-mask',
              isMask: true,
              fillColorMask: 'ff002a'
            },
            {
              key: 'inner-circle-mask',
              fillColorMask: 'ffffff',
              isMask: true
            }
          ]
        });
      });
    </script>
  </head>
  <body>
    <div class="navmenu">
      Return to <a href="index.html">Main Menu</a>
      <hr />
    </div>

    <h2>Shapes Demo</h2>
    <p>
      This demo shows some advanced features using multiple groups and
      exclusions.
    </p>
    <ul>
      <li>The outer circle is selected independently from the inner circle.</li>
      <li>
        The inner circle area is used twice - once as an exclusion from the
        outer circle to create the ring effect, and again as its own area. This
        is done by specifying two different groups in its "mapKey" and then
        specifying options for both to create the desired effect.
      </li>
      <li>
        The small circle within the ring when highlighed is another exclusion
        and shows excluding multiple areas.
      </li>
      <li>
        The rightmost rectangle is selected with the center circle (and has
        independent rendering options), but does not itself respond to mouse
        events.
      </li>
    </ul>
    <p>
      With Internet Explorer 6-8, masking is not possible. In this case the
      effect is simulated by rendering the masked area with a specific color
      that can be defined with the "fillColorMask" option. This option is
      ignored when using HTML5 canvases. The default is white, which is used for
      the inner circle, and 2nd small circle in the ring is set specifically to
      match the color of the ring area.
    </p>
    <img
      src="images/shapes.jpg"
      width="512"
      height="176"
      border="0"
      alt=""
      usemap="#shapes_Map"
    />
    <map name="shapes_Map">
      <!-- ImageReady Slices (shapes.jpg) -->
      <area
        shape="rect"
        group="rectangle"
        alt=""
        coords="378,39,463,116"
        nohref
      />
      <area
        shape="poly"
        group="blue-circle"
        alt=""
        coords="286,34, 298,42, 308,54, 314,79, 307,103, 292,118, 270,125, 242,122, 227,112, 216,97, 212,73, 219,53, 227,43, 240,34, 264,29"
        href="#"
      />
      <!--
<area shape="poly" group="outer-circle" alt="" coords="100,22, 100,46, 90,47, 88,48, 82,51, 73,58, 66,68, 64,81, 65,90, 66,92, 69,98, 77,107, 85,112, 95,115, 100,115, 100,139, 93,138, 83,137, 81,136, 73,133, 71,132, 60,125, 49,113, 42,99, 39,85, 40,69, 41,67, 44,57, 51,45, 65,32, 81,25, 85,24, 91,23" href="#">
<area shape="poly" group="outer-circle" alt="" coords="108,23, 123,26, 139,35, 151,48, 158,62, 161,76, 160,92, 159,94, 156,104, 149,116, 135,129, 125,134, 115,137, 109,138, 100,138, 100,115, 111,114, 113,113, 122,108, 132,98, 135,92, 137,83, 136,71, 135,69, 132,63, 124,54, 113,48, 109,47, 105,46, 100,46, 100,22"
href="#">

<area shape="circle" group="inner-circle" coords="101,81,36" href="#">
-->
      <!-- concentric circles for stroke highlighting -->
      <area
        shape="circle"
        group="inner-circle,inner-circle-mask"
        coords="101,81,36"
        href="#"
      />
      <area
        shape="circle"
        group="outer-circle-mask"
        coords="148,81,12"
        nohref
      />
      <area shape="circle" group="outer-circle" coords="100,81,59" href="#" />
      <!-- End circles -->
    </map>
  </body>
</html>
